<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class style绑定</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{appDiv1:isDivColor}"
				style="width: 200px; height: 200px;text-align: center;line-height: 200px;">
				绑定div class
			</div>
			<br>
			<div v-bind:class="classObject" style="width: 200px; height: 200px;text-align: center;line-height: 200px;">
				绑定div class 对象语法
			</div>

			<div :style="{color:color,fontSize:fontsize}">
				绑定div style
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isDivColor: true,
					color: "red",
					fontsize: "30px",
					 classObject: {
					    font: true,
					    'text-danger': true
					  }
				}
			})
		</script>
		<style type="text/css">
			.fontSize30 {
				font-size: 30px;
			}

			.appDiv1 {
				background-color: red;
			}
			.font{
				font-size: 1.875rem;
				color: green;
			}
		</style>
	</body>
</html>
